'use strict';
//我的拼团
import React, {Component} from 'react';
import Header from '../../common/header';
import * as URLconstant from '../../constant/URLconstant'
import Util from '../../common/util';
import Toast from '../../common/ToastUtil'
import {
    View,
    Text,
    TouchableOpacity,
    Image,
    StyleSheet,
    FlatList
} from 'react-native';

export default class myGroup extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            groupHeader: [{'status': 0, 'name': '待成团'}, {'status': 1, 'name': '拼团成功'}, {'status': 2, 'name': '拼团失败'}],
            headerIndex: 0,
            groupList: null,
            page: 1,
            limit: 10,
            isOver: true,
            loaded: true,
        };
        this.renderFooter = this.renderFooter.bind(this)
    }


    componentDidMount() {
        this.getGroup()
    }

    getGroup() {
        let params = this.props.route.params
        let url
        let headerIndex = this.state.headerIndex
        if (headerIndex == 0) {
            url = URLconstant.GROUP_WAIT
        } else if (headerIndex == 1) {
            url = URLconstant.GROUP_SUCCESS
        } else {
            url = URLconstant.GROUP_FAIL
        }
        let datakey = []
        datakey['user_id'] = params.user_id
        datakey['page'] = this.state.page
        datakey['limit'] = this.state.limit
        Util.get(url, datakey, this.getGroupSuc.bind(this), this.errorCallback.bind(this))
    }

    getGroupSuc(datas) {
        if (datas.status == 0) {
            let isOver = false
            let total = datas.data.total
            let limit = this.state.limit
            let newDatas
            if (datas.data.length == 0) {
                newDatas = []
            } else {
                newDatas = datas.data.list;
            }

            let groupList = this.state.groupList;
            if (groupList == null) {
                groupList = []
            }
            if (newDatas.length < limit) {
                isOver = true
            }
            Array.prototype.push.apply(groupList, newDatas);
            this.setState({
                isOver: isOver,
                groupList: groupList,
                loaded: false,
            })
        } else {
            this.setState({
                loaded: false,
                groupList: []
            })
        }
    }

    errorCallback(err) {

    }

    async selectStatus(status) {
        await this.setState({
            headerIndex: status,
            groupList: null,
            page: 1,
            limit: 10,
            isOver: false,
            loaded: true,
        })
        this.getGroup()
    }


    onEndReached() {

    }

    renderFooter() {
        return (
            <View style={{height: 30, alignItems: 'center', justifyContent: 'center'}}>
                <Text style={{fontSize: 12, color: "#969696"}}>{this.state.isOver ? "没有更多数据了" : "正在加载中"}</Text>
            </View>
        )
    }

    toOrder(item) {
        let params = this.props.route.params
        this.props.navigation.push('OrderInfo',{
            user_id: params.user_id,
            order_id: item.order_id
        })
    }

    _renderRow=({ item })=> {
        return (
            <TouchableOpacity onPress={() => this.toOrder(item)} key={item.order_id} style={styles.order_item}>
                <View style={styles.order_header}>
                    <Text style={{fontSize: 14, color: "#000", marginBottom: 5}}>店铺名:{item.seller_name}</Text>
                    <Text style={{fontSize: 12, color: "#969696"}}>订单号:{item.order_sn}</Text>
                </View>
                <View style={styles.goods_list_view}>
                    <View style={styles.goods_item}>
                        <Image
                            source={{uri: item.goods_image}}
                            resizeMode={'cover'}
                            style={{width: 80, height: 80}}
                        />
                        <View style={styles.goods_item_right}>
                            <View style={styles.right_header}>
                                <Text style={{fontSize: 14, color: "#000"}}>{item.goods_name}</Text>
                                <Text style={{fontSize: 12, color: "#969696"}}>{item.specification}</Text>
                            </View>
                            <View style={styles.goods_price_view}>
                                <Text style={{fontSize: 12, color: "#333"}}>单价:</Text>
                                <Text style={{fontSize: 14, color: "#f00"}}>¥{item.goods_amount}</Text>
                            </View>
                        </View>
                    </View>
                </View>
                <View style={styles.order_bottom}>
                    <Text style={{fontSize: 14, color: "#333"}}>共{item.total}件商品,合计</Text>
                    <Text style={{fontSize: 14, color: "#f00", marginRight: 5}}>¥{item.order_amount}</Text>
                    <Text style={{fontSize: 12, color: "#696969"}}>(含运费¥{item.shipping_fee}元)</Text>
                </View>
            </TouchableOpacity>
        )
    }


    render() {
        return (
            <View style={{flex: 1, backgroundColor: "#f0f0f0"}}>
                <Header navigation={this.props.navigation} title={'我的拼团'}/>
                <View style={styles.header_view}>
                    {
                        this.state.groupHeader.map((item, index) => {
                            return (
                                <TouchableOpacity onPress={() => this.selectStatus(item.status)} key={index}
                                                  style={item.status == this.state.headerIndex ? [styles.header_item, styles.selected_item] : styles.header_item}>
                                    <Text style={item.status == this.state.headerIndex ? {
                                        fontSize: 14,
                                        color: "#f00"
                                    } : {fontSize: 14, color: "#000"}}>{item.name}</Text>
                                </TouchableOpacity>
                            )
                        })
                    }
                </View>
                {
                    this.state.loaded ?
                        <View style={{flex: 1}}>
                            {Util.loading()}
                        </View> :
                        <View style={{flex: 1}}>
                            {
                                this.state.groupList.length == 0 ?
                                    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                                        <Text>没有拼团记录</Text>
                                    </View>
                                    :
                                    <View style={{flex:1}}>
                                        <FlatList
                                            style={{paddingHorizontal: 10}}
                                            data={this.state.groupList}
                                            renderItem={this._renderRow}
                                            onEndReached={this.onEndReached.bind(this)}
                                            keyExtractor={item => item.order_id}
                                        />
                                    </View>
                            }
                        </View>
                }
            </View>
        )
    }
}
var styles = StyleSheet.create({
    header_view: {
        flexDirection: 'row',
        backgroundColor: "#fff",
        marginBottom: 10
    },
    header_item: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height: 35,
        borderBottomWidth: 1,
        borderBottomColor: "transparent"
    },
    selected_item: {
        borderBottomColor: "#f00"
    },
    order_item: {
        backgroundColor: "#fff",
        paddingHorizontal: 10,
        marginBottom: 10
    },
    order_header: {
        borderBottomWidth: 1,
        borderBottomColor: "#e0e0e0",
        paddingVertical: 5
    },
    goods_list_view: {
        paddingVertical: 5
    },
    goods_item: {
        flexDirection: 'row',
        paddingVertical: 5,
    },
    goods_item_right: {
        paddingLeft: 10,
        height: 80,
        justifyContent: 'space-between',
        flex: 1
    },
    right_header: {
        flexDirection: 'column'
    },
    goods_price_view: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    order_bottom: {
        height: 35,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
        borderTopWidth: 1,
        borderTopColor: "#e0e0e0"
    }
})